<template>
  <el-dialog v-model="dialogVisible" title="编辑节点" width="900" destroy-on-close lock-scroll center
             :close-on-click-modal="false">
    <el-form ref="elFormRef" v-if="currentNode" :model="currentNode.properties" :rules="rules"
             label-width="120px">
      <el-form-item label="组件ID" prop="ID">
        <el-input v-model="currentNode.id" disabled/>
      </el-form-item>

      <el-form-item label="组件类型" prop="type">
        <el-tag v-if="currentNode.type === 'CommonNode'" type="primary">普通组件</el-tag>
        <el-tag v-else-if="currentNode.type === 'ForNode'" type="danger">For循环组件</el-tag>
        <el-tag v-else-if="currentNode.type === 'BooleanNode'" type="success">布尔组件</el-tag>
        <el-tag v-else-if="currentNode.type === 'IteratorNode'" type="danger">Iterator迭代组件</el-tag>
        <el-tag v-else-if="currentNode.type === 'SwitchNode'" type="warning">选择组件</el-tag>
        <el-tag v-else-if="currentNode.type === 'WhileNode'" type="danger">While循环组件</el-tag>
      </el-form-item>

      <el-form-item label="英文名称" prop="code">
        <div v-if="currentNode.properties.id">{{ currentNode.properties.code }}</div>
        <el-input v-else v-model="currentNode.properties.code" placeholder="请输入英文名称" @change="handleCodeChange"/>
      </el-form-item>

      <el-form-item label="中文描述" prop="comment">
        <div v-if="currentNode.properties.id">{{ currentNode.properties.comment }}</div>
        <el-input v-else v-model="currentNode.properties.comment" placeholder="请输入中文描述"/>
      </el-form-item>

      <el-form-item label="类路径" prop="clazz">
        <div v-if="currentNode.properties.id">{{ currentNode.properties.clazz }}</div>
        <el-input v-else v-model="currentNode.properties.clazz" placeholder="请输入类路径"/>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <div v-if="currentNode.properties.id">{{ currentNode.properties.sort }}</div>
        <el-input-number v-else v-model="currentNode.properties.sort" controls-position="right" :min="0"
                         :step="1"></el-input-number>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <div v-if="currentNode.properties.id">{{ currentNode.properties.remark }}</div>
        <el-input v-else v-model="currentNode.properties.remark" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <!--
            <el-divider content-position="left">入参</el-divider>
            <form-table :drag-sort="true" v-model="currentNode.properties.innerLfComponentParamBoList"
                        :add-template="{name: '' , type: '' , comment: '' , category: 'INNER' , sort: ''}"
                        :disabled-add="currentNode.properties.id" :disabled-delete="() => currentNode.properties.id">
              <el-table-column label="字段名称（英文）" align="center" prop="name">
                <template #default="{row, $index}">
                  <el-form-item :prop="`innerLfComponentParamBoList[${$index}].name`" :label-width="1"
                                :rules="rules.paramName">
                    <el-input v-model="row.name" placeholder="请输入字段名称"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="字段类型" align="center" prop="type">
                <template #default="{row, $index}">
                  <el-form-item :prop="`innerLfComponentParamBoList[${$index}].type`" :label-width="1"
                                :rules="rules.paramType">
                    <el-select v-model="row.type" placeholder="请选择字段类型" clearable filterable>
                      <el-option label="String" value="String"></el-option>
                      <el-option label="Number" value="Number"></el-option>
                      <el-option label="Boolean" value="Boolean"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="字段描述" align="center" prop="comment">
                <template #default="{row, $index}">
                  <el-form-item :prop="`innerLfComponentParamBoList[${$index}].comment`" :label-width="1">
                    <el-input v-model="row.comment" type="textarea" placeholder="请输入字段描述"/>
                  </el-form-item>
                </template>
              </el-table-column>
            </form-table>

            <el-divider content-position="left">出参</el-divider>
            <form-table :drag-sort="true" v-model="currentNode.properties.outerLfComponentParamBoList"
                        :add-template="{name: '' , type: '' , comment: '' , category: 'OUTER' , sort: ''}"
                        :disabled-add="currentNode.properties.id" :disabled-delete="() => currentNode.properties.id">
              <el-table-column label="字段名称（英文）" align="center" prop="name">
                <template #default="{row, $index}">
                  <el-form-item :prop="`outerLfComponentParamBoList[${$index}].name`" :label-width="1"
                                :rules="rules.paramName">
                    <el-input v-model="row.name" placeholder="请输入字段名称"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="字段类型" align="center" prop="type">
                <template #default="{row, $index}">
                  <el-form-item :prop="`outerLfComponentParamBoList[${$index}].type`" :label-width="1"
                                :rules="rules.paramType">
                    <el-select v-model="row.type" placeholder="请选择字段类型" clearable filterable>
                      <el-option label="String" value="String"></el-option>
                      <el-option label="Number" value="Number"></el-option>
                      <el-option label="Boolean" value="Boolean"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="字段描述" align="center" prop="comment">
                <template #default="{row, $index}">
                  <el-form-item :prop="`outerLfComponentParamBoList[${$index}].comment`" :label-width="1">
                    <el-input v-model="row.comment" type="textarea" placeholder="请输入字段描述"/>
                  </el-form-item>
                </template>
              </el-table-column>
            </form-table>
            -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancelClick">取消</el-button>
        <el-button type="primary" @click="handleConfirmClick">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="js">
import {ref} from 'vue'

const dialogVisible = ref(false);
const currentNode = ref({});
const elFormRef = ref();
const rules = ref({
  id: [
    {required: true, message: "主键不能为空", trigger: "blur"}
  ],
  code: [
    {required: true, message: "英文名称不能为空", trigger: "blur"}
  ],
  paramName: [
    {required: true, message: "字段名称（英文）不能为空", trigger: "blur"}
  ],
  paramType: [
    {required: true, message: "字段类型不能为空", trigger: "blur"}
  ],
});

const emit = defineEmits(['updateNode']);

const handleCodeChange = () => {
  currentNode.value.text.value = currentNode.value.properties.code;
}

const handleCancelClick = () => {
  dialogVisible.value = false;
}

const handleConfirmClick = () => {
  elFormRef.value.validate(async (valid) => {
    if (valid) {
      emit('updateNode', currentNode.value)
      dialogVisible.value = false;
    }
  });
}

const resetDialog = () => {
  currentNode.value = {};
}

const openDialog = (nodeData) => {
  resetDialog();
  currentNode.value = nodeData;
  dialogVisible.value = true;
}

defineExpose({openDialog});
</script>
